<template>
	<view class="gui-padding">
		<view class="gui-margin-top-large gui-flex gui-rows">
			<text class="gui-text lineH60 gui-primary-color" style="margin-right:10rpx;">验证码已经发送到您的手机</text>
			<text class="gui-text gui-bold lineH60 primary-color">{{phone}}</text>
		</view>
		<view class="gui-margin-top gui-flex gui-rows gui-justify-content-center">
			<text class="gui-number-input gui-block-text" @tap.stop="showKbd">{{vcode[0]}}</text>
			<text class="gui-number-input gui-block-text" @tap.stop="showKbd">{{vcode[1]}}</text>
			<text class="gui-number-input gui-block-text" @tap.stop="showKbd">{{vcode[2]}}</text>
			<text class="gui-number-input gui-block-text" @tap.stop="showKbd">{{vcode[3]}}</text>
			<text class="gui-number-input gui-block-text" @tap.stop="showKbd">{{vcode[4]}}</text>
			<text class="gui-number-input gui-block-text" @tap.stop="showKbd">{{vcode[5]}}</text>
		</view>
		<view class="gui-margin-top gui-nowrap gui-flex-center">
			<text class="gui-text gui-color-gray">请填写6位数字验证码</text>
			<text @tap="getVCode" class="gui-text primary-color">{{vcodeBtnName}}</text>
		</view>
		<gui-number-keyboard tapBgColor="#FF33FF" ref="guinumberkeyboard" :isPoint="false" @keyboardDone="keyboardDone"
			@keyboardInput="keyboardInput" @keyboardDelete="keyboardDelete"></gui-number-keyboard>
	</view>
</template>
<script>
	var graceJS = require('@/GraceUI5/js/grace.js');
	export default {
		data() {
			return {
				phone: '',
				vcode: ['', '', '', '', '', ''],
				vcodeBtnName: "",
				countNum: 60,
				countDownTimer: null,
				oldPhone: ''
			};
		},
		onLoad(options) {
			console.log(options);
			this.phone = options.phone
			this.oldPhone = options.oldPhone
			// 倒计时 时间间隔自行设置
			this.countDownTimer = setInterval(() => {
				this.countDown();
			}, 1000);
		},
		onReady: function() {
			graceJS.getRefs('guinumberkeyboard', this, 0, (ref) => {
				ref.open();
			});
		},
		methods: {
			showKbd: function() {
				this.$refs.guinumberkeyboard.open();
			},
			// 自动提交
			submitCode: function() {
				// 关闭键盘
				this.$refs.guinumberkeyboard.close();
				// 验证码保存在数组 vcode 中
				console.log(this.vcode.join(''));
				// 请自行完善验证码提交工作
				setTimeout(() => {
					this.$http.put('/api/user/phone', {
						phone: this.oldPhone,
						newPhone: this.phone,
						vcode: this.vcode.join('')
					}).then(res => {
						if (res.data.code == 200) {
							console.log(res.data.data)
							this.$u.msg('修改成功，为了您的安全，请用新手机号重新登陆')
							setTimeout(() => {
								uni.removeStorageSync('token')
								uni.reLaunch({
									url: 'mine'
								})
							}, 1500)
						} else {
							this.$u.msg(res.data.msg)
						}
					})
					uni.hideLoading();
				}, 1500);
			},
			// 监听输入
			keyboardInput: function(e) {
				if (e == '.') {
					return;
				}
				var code = this.vcode;
				var codeLength = 0;
				for (let i = 0; i < code.length; i++) {
					codeLength = i + 1;
					if (code[i] === '') {
						code.splice(i, 1, e);
						break;
					}
				}
				this.vcode = code;
				if (codeLength >= 6) {
					// 验证码提交
					this.submitCode();
				}
			},
			// 监听删除
			keyboardDelete: function() {
				for (let i = this.vcode.length - 1; i >= 0; i--) {
					if (this.vcode[i] !== '') {
						this.vcode.splice(i, 1, '');
						break;
					}
				}
			},
			// 完成事件
			keyboardDone: function() {
				this.$refs.guinumberkeyboard.close();
			},
			// 发送验证码
			getVCode: function() {
				// 手机号码为 : 上一级页面已经获得了才能来到这里，利用url参数传递过来即可
				// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
				if (this.vcodeBtnName != '获取验证码' && this.vcodeBtnName != '重新发送') {
					return;
				}
				this.vcodeBtnName = "发送中...";
				this.countNum = 60;
				// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
				this.$http.get(`/spread/api/common/sms/${this.phone}`).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data)
						// 假设发送成功，给用户提示
						this.$u.msg('短信已发送，请注意查收')
						// 倒计时
						this.countDownTimer = setInterval(() => {
							this.countDown();
						}, 1000);
					} else {
						this.$u.msg(res.data.msg)
					}
				})
			},
			countDown: function() {
				if (this.countNum <= 1) {
					clearInterval(this.countDownTimer);
					this.vcodeBtnName = "重新发送";
					return;
				}
				this.countNum--;
				this.vcodeBtnName = this.countNum + '秒后重新发送';
			}
		}
	}
</script>
<style>
	.lineH60 {
		line-height: 60rpx;
	}

	.gui-number-input {
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #A5A7B2;
		text-align: center;
		margin: 10rpx;
		border-width: 1px;
		border-style: solid;
		border-color: #D5D6D8;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}
</style>
